<template>
  <e-container :loading="loading">
    <e-title title="Factor Settings" />
    <a-divider />
    <div class="form">
      <a-form ref="formRef" :model="apiData" layout="vertical" :rules="rules">
        <a-row :gutter="gutter">
          <a-col :span="24">
            <a-form-item label="Client Factor" name="clientCoefficient">
              <a-input v-model:value="apiData.clientCoefficient" autocomplete="off" style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="gutter">
          <a-col :span="24">
            <a-form-item label="Commission Factor" name="priceCoefficient">
              <a-input v-model:value="apiData.priceCoefficient" style="width: calc(100% - 40px)" />
              <e-icon
                type="calculate"
                font-size="20px"
                color="#818d9f"
                style="border: 1px solid #d9d9d9; border-left: none; cursor: pointer; padding: 5px 10px"
                @click="getCommission"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-divider />
    <div class="buttons">
      <a-space size="middle">
        <a-button @click="handleCancel">Cancel</a-button>
        <a-button v-permission="'FinancialInformation:Factor:Edit'" type="primary" @click="handleSave">Save</a-button>
      </a-space>
    </div>
  </e-container>
</template>

<script setup>
import { ref, reactive, inject, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { CONFIRM_BACK_TO_DETAIL, SAVED_SUCCESSFULLY } from '@/constants/message'
import financial from '@/api/client/financial.js'
import EContainer from '@/components/EContainer.vue'
import ETitle from '@/components/ETitle.vue'
import EIcon from '@/components/EIcon.vue'

const route = useRoute()
const router = useRouter()
const emits = defineEmits(['updated'])
const loading = ref(true)
const { id } = route.params
const gutter = [120, 16]
const { Modal, message } = inject('Feedback')
const formRef = ref(null)
const apiData = reactive({
  clientCoefficient: null,
  priceCoefficient: null
})
const rules = {
  clientCoefficient: [
    {
      required: true,
      message: 'Please input client factor',
      trigger: 'blur'
    },
    {
      validator: (rule, value) => {
        return value < 0.5 || value > 1.5 ? Promise.reject(new Error()) : Promise.resolve()
      },
      message: 'Client factor is invalid.',
      trigger: 'blur'
    }
  ],
  priceCoefficient: [
    {
      required: true,
      message: 'Please input commission factor',
      trigger: 'blur'
    },
    {
      validator: (rule, value) => {
        return value <= 0 || value > 5 ? Promise.reject(new Error()) : Promise.resolve()
      },
      message: 'Commission factor is invalid.',
      trigger: 'blur'
    }
  ]
}
/**
 * 回显数据
 */
const review = () => {
  financial
    .getBasicInfo(id)
    .then(res => {
      if (res.code === 2000) {
        apiData.clientCoefficient = res.data.clientCoefficient
        apiData.priceCoefficient = res.data.priceCoefficient
      }
    })
    .finally(() => {
      loading.value = false
    })
}
/**
 * 自动获取Commission Factor
 */
const getCommission = () => {
  financial
    .getCommission({
      clientID: id
    })
    .then(res => {
      if (res.code === 2000) {
        apiData.priceCoefficient = res.data
      }
    })
}
/**
 * 保存
 */
const handleSave = () => {
  formRef.value.validate().then(() => {
    financial
      .updateClientFinanceFactor({
        id,
        priceCoefficient: apiData.priceCoefficient,
        clientCoefficient: apiData.clientCoefficient
      })
      .then(res => {
        if (res.code === 2000) {
          message.success(SAVED_SUCCESSFULLY)
          router.push({ name: 'Financial Information' })
          emits('updated')
        }
      })
  })
}
/**
 * 取消模态框
 */
const handleCancel = () => {
  Modal.confirm({
    content: CONFIRM_BACK_TO_DETAIL,
    okButtonProps: { danger: true },
    onOk: () => {
      router.push({ name: 'Financial Information' })
      emits('updated')
    }
  })
}
/**
 * 初始化
 */
onMounted(() => {
  review()
})
</script>

<style scoped lang="less">
.form {
  padding: 0 228px;
}
.buttons {
  text-align: center;
}
.ant-divider {
  border-top: 1px solid #dcdee7 !important;
}
:deep(.ant-input-number-handler-wrap) {
  display: none !important;
}
:deep(.ant-input::-webkit-inner-spin-button),
:deep(.ant-input::-webkit-outer-spin-button) {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
<route lang="yaml">
name: Factor Settings
path: '/client/:id/financial-information/factor-settings'
meta:
  title: Factor Settings
  permission: FinancialInformation
</route>
